<!--
 * @Description: 资源管理---运维资源
 * @Author: 魏勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-03-31 18:16:32
 * @LastEditors: 魏勇
 -->
<template>
    <div class="addServerConfigForm">
        <div class="dynamicForm" style="padding: 0 15px;">
            <el-row class="form-row-list" :key="index" v-for="(itemObj,index) in items">
                <el-col :span="4">
                    <span>{{itemObj.label}}：</span>
                </el-col>
                <el-col :span="18">
                    <span>{{curRow[itemObj.id]}}</span>
                </el-col>
            </el-row>

            <el-row style="margin-top: 15px;">
                <span style="color:#999;">添加特殊配置字段</span>
                <div class="temp-table">
                    <div class="temp-header" style="margin-bottom: 5px;">
                        <div class="left-cell">序号</div>
                        <div class="left-cell" style="width: 160px;">配置项名称</div>
                        <div class="left-cell" style="width: 160px;">配置项编码</div>
                        <div class="left-cell" style="width: 160px;">类型</div>
                        <div class="left-cell" style="width: 160px;">内容</div>
                        <div class="left-cell" style="width:130px;">操作</div>
                    </div>

                    <div class="temp-body">
                        <el-row v-for="(itemObj,index) in dynamicItems">
                            <div class="left-cell content">1</div>
                            <div class="left-cell content" style="width: 160px;">
                                <el-input
                                        :disabled="!btnState(itemObj)"
                                        size="small"
                                        placeholder="输入名称"
                                        v-model="itemObj.name"
                                >
                                </el-input>
                            </div>
                            <div class="left-cell content" style="width: 160px;">
                                <el-input
                                        :disabled="!btnState(itemObj)"
                                        size="small"
                                        placeholder="输入编码"
                                        v-model="itemObj.code"
                                >
                                </el-input>
                            </div>
                            <div class="left-cell content" style="width: 160px;">
                                <el-select v-model="itemObj.type"   :disabled="!btnState(itemObj)" @change="changeVal" size="small" placeholder="请选择类型"
                                           style="width: 100%;">
                                    <el-option
                                            v-for="(item,index) in typeOptions"
                                            :key="index"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="left-cell content" style="width: 160px;">
                                <el-input
                                        :disabled="!btnState(itemObj)||itemObj.type!=='3'"
                                        size="small"
                                        placeholder="下拉内容"
                                        v-model="itemObj.enumContent"
                                >
                                </el-input>
                            </div>
                            <!--操作按钮-->
                            <div class="left-cell content" style="width: 130px;">
                                   <span class="span-btn" @click="addRowCol(index)">
                                        <i class="el-icon-circle-plus-outline btnIcon"></i>
                                       <span style="display: inline-block;margin-left:4px;"> 添加</span>
                                   </span>
                                <span class="span-btn" v-show="btnState(itemObj)&&index!==0" @click="delRowCol(index,itemObj)">
                                         <i class="el-icon-circle-close btnIcon"></i>
                                         <span style="display: inline-block;margin-left:4px;"> 删除</span>
                                   </span>
                            </div>
                        </el-row>
                    </div>
                </div>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {dateFormat} from "@/utils/tool";
    import domainCols from '../data/domainCols';

    export default {
        name: "addServerConfigForm",
        components: {},
        computed: {},
        props: {
            curRow: {
                type: Object, default: () => {
                }
            },
            dataItems: {}
        },
        data: function () {
            return {
                items: domainCols,
                typeValue: '',
                typeOptions: [
                    {label: '普通输入类型', value: "1"},
                    {label: '时间格式类型', value: "2"},
                    {label: '下拉枚举类型', value: "3"}
                ],
                dynamicItems: this.dataItems
            }
        },
        created() {

        },
        mounted() {
            if(this.dataItems==null||this.dataItems===""||this.dataItems.length===0){
                this.initDynamicItems();
            }else{
                this.dynamicItems =this.dataItems;
            }
        },
        watch: {
            dataItems(newVal) {
                if(newVal==null||newVal===""||newVal.length===0){
                    this.initDynamicItems();
                }else{
                    this.dynamicItems =newVal;
                }
            }
        },
        methods: {
            initDynamicItems(){
                //初始化值
                this.dynamicItems=[
                    {
                        "dependId": this.curRow["id"],
                        "name": "",
                        "type": "",
                        "code": "",
                        "enumContent": "",
                        "binded":"0",
                        "value": ""
                    }
                ]
            },
            btnState({binded}){
                    if(binded===0||binded==='0'){
                        return true;
                    }else{
                        return false;
                    }
            },
            //清空数据
            clearData() {
                this.dynamicItems = [];
                this.initDynamicItems();
            },
            //获取需要提交的数据
            getSubmitData() {
                return this.dynamicItems;
            },
            //动态插入行
            addRowCol(index) {
                this.dynamicItems.splice((index+1), 0, {
                    "dependId": this.curRow["id"],
                    "name": "",
                    "type": "",
                    "code": "",
                    "binded":"0",
                    "enumContent": "",
                    "value": ""
                });

            },
            delFromDb(id,backFun){
                this.api.deleteServerConfig({id})
                    .then(res => {
                        backFun&&backFun();
                    })
                    .catch(err => {
                        console.warn(err.msg)
                    });
            },
            //删除指定行
            delRowCol(index,item) {
                if(item["id"]){
                    this.delFromDb(item["id"],()=>{
                        this.dynamicItems.splice(index, 1);
                    });
                }else{
                    this.dynamicItems.splice(index, 1);
                }
            },
            changeVal() {
            },
        }
    };
</script>

<style lang="scss" src="../../../assets/styles/resource/index.scss" scoped></style>
